<template>
  <div class="audiomodule">
    <!-- :value="vuexAudioDate" -->
    <el-slider
      ref="elslider"
      v-model="sliderLeft"
      :show-tooltip="false"
      :step="0.1"
      @change='onChange'
    ></el-slider>
    <div class="subject">
      <div class="left">
        <img
          class="audio-img"
          :src="imgurl"
          alt=""
        >
        <div class="left-text">
          <p class="left-span">{{title || '...'}}</p>
          <i class="iconfont icon-zan"></i>
        </div>
      </div>
      <div class="in">
        <div class="moshi">
          <el-tooltip
            class="item"
            effect="light"
            :content="playMode.content"
            placement="top"
          >
            <i
              class="iconfont ic-mode"
              :class="playMode.cls"
              @click="onPlayMode()"
            ></i>
          </el-tooltip>
        </div>
        <i
          class="el-icon-caret-left"
          @click="leftClick()"
        ></i>
        <svg
          @click="svgClick(ispaly)"
          class="svg-icon svg-stype"
          aria-hidden="true"
        >
          <use v-bind:xlink:href="ispaly ? '#icon-kaishi-copy-copy' : '#icon-zanting'"></use>
        </svg>
        <i
          class="el-icon-caret-right"
          @click="rightClick()"
        ></i>
      </div>
      <div class="right">
        <div class="right-date">
          <span>{{currentTime}}</span>
          <span>&ensp;/&ensp;{{totalTime}}</span>
        </div>
        <i
          class="el-icon-s-unfold"
          @click="unfoid()"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import audioMixins from '@/mixins/audio-mixins'
import emiton from '@/common/emit/emiton'
let winLeft = null
let auside = true
export default {
  name: 'AudioModule',
  mixins: [audioMixins],
  data() {
    return {
      ispaly: true,
      title: '说书人',
      imgurl: 'https://p2.music.126.net/JHXgLgO7SIaVYacrW_wJuw==/109951165246765187.jpg',
      sliderLeft: 0,
      playMode: {
        content: '顺序播放',
        mode: 0,
        cls: 'icon-xunhuan',
      },
    }
  },
  created() {
    emiton.$on('embenshowhide', data => {
      auside = data
    })
  },
  computed: {
    ...mapState(['audioId', 'totalTime', 'currentTime']),
    vuexAudioDate() {
      let left = this.$store.state.audioDate * 1
      return left
    },
  },
  watch: {
    audioId(newValue, oldValue) {
      this.title = newValue.al.name
      this.imgurl = newValue.al.picUrl
      this.svgClick(newValue)
    },
    vuexAudioDate(val, olval) {
      this.sliderLeft = val
    },
  },
  methods: {
    // 中间播放按钮状态
    svgClick(nun) {
      if (nun) {
        // 播放
        this.ispaly = false
        this.play()
      } else {
        // 暂停
        this.ispaly = true
        this.pause()
      }
    },
    // 上一首
    leftClick() {
      const obj = this.getSongsIndex(true)
      this.$store.commit('getAudioobj', obj)
    },
    // 下一首
    rightClick() {
      const obj = this.getSongsIndex(false)
      this.$store.commit('getAudioobj', obj)
    },
    // 	值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）
    // 拖拽进度条
    onChange(val) {
      // 歌曲没有加载完成不能拖拽
      if (window.audioElement.duration == 'NaN') {
        this.$message({
          message: '等待加载',
          type: 'info',
        })
        return
      }
      // 节流，防抖
      clearTimeout(winLeft)
      winLeft = setTimeout(() => {
        const currTime = (val / 100) * window.audioElement.duration
        window.audioElement.currentTime = parseInt(currTime)
      }, 700)
    },
    // 求换播放方式
    onPlayMode() {
      let playMode = this.playMode.mode
      playMode++
      switch (playMode) {
        case 1:
          this.playMode = {
            content: '随机播放',
            mode: 1,
            cls: 'icon-suiji',
          }
          break
        case 2:
          this.playMode = {
            content: '单曲循环',
            mode: 2,
            cls: 'icon-hanhan-01-01',
          }
          break
        default:
          this.playMode = {
            content: '顺序播放',
            mode: 0,
            cls: 'icon-xunhuan',
          }
      }
      this.$store.commit('getPlayMode', this.playMode.mode)
    },
    unfoid() {
      auside = !auside
      emiton.$emit('emshowhide', auside)
    },
  },
}
</script>

<style lang="scss" scoped>
.audiomodule {
  position: fixed;
  bottom: 0;
  left: 248px;
  width: calc(100vw - 248px);
  height: 4.6rem;
  background-color: #fff;
  z-index: 2000;

  .subject {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    @include dif-juspb-alic;

    .left {
      width: 20%;
      @include dif-alc;

      .audio-img {
        width: 50px;
        height: 50px;
        border-radius: 6px;
      }

      .left-text {
        padding: 5px 0;
        margin-left: 10px;

        .left-span {
          color: $textColor;
          font-size: 16px;
          font-family: 'Microsoft YaHei';
          @include text-d;
          min-width: 120px;
          max-width: 250px;
        }

        .icon-zan {
          font-size: 16px;
        }
      }
    }

    .in {
      width: 15%;
      @include dif-juspb-alic;
      font-size: 50px;

      .moshi {
        @include dif-alc;

        .ic-mode {
          font-size: 25px;
        }
      }
    }

    .right {
      width: 20%;
      @include dif-alc;

      .right-date {
        font-size: 16px;
        color: $textColor;
        font-family: 'Microsoft YaHei';
        margin-right: 20px;
      }

      .el-icon-s-unfold {
        font-size: 25px;
      }
    }
  }
}
.audiomodule ::v-deep .el-slider__runway {
  margin: 0;
  height: 3px;
}
.audiomodule ::v-deep .el-slider__bar {
  height: 3px;
}
.audiomodule ::v-deep .el-slider__button-wrapper {
  top: -17px;
}
.audiomodule ::v-deep .el-slider__button {
  width: 7px;
  height: 7px;
  border: 0px;
  background-color: #15d9f6;
}
</style>